<template>
<section class="hot">
  <div class="hot-inner">
    <el-row :gutter="15">
      <el-col :span="6" v-for="(item,index) in gallery" :key="index">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <el-image :src="'/images/'+item.thumbnail" @click="clickToList(item)" style="height:240px;" fit="cover"></el-image>
          <div class="card-footer">
            <p class="title" @click="clickToList(item)">{{item.name}}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</section>
</template>

<script>
export default {
  name: 'Hot',
  data() {
    return {
      search: '',
      searchSelect: '',
      gallery: [],
    }
  },
  mounted() {
    this.$axios.get('/api/web/getHot').then(res=>{
      this.gallery=res.data.rows
    }).catch(err=>{
      console.log(err)
    })
  },
  methods: {
    clickToList(obj) {
   
      var type=parseInt(obj.link_type)
      var key=''
      if(type===1){
       key="category_id"
        // console.log('分类',obj)
      }else if(type===2){
        key="tag_id"
        // console.log('便签')
      }else if(type===3){
        key="topic_id"
        // console.log('专题')
      }else{
        // console.log('链接')
        window.open(obj.link,'_self')
        return;
      }
       this.$router.push({
          name:'list',
          path:'/list',
          query:{
            [key]:obj.link_id,
            title:obj.name
          }
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.hot {
    padding: 20px;
    margin-bottom: 24px;
    background-color: @color-global-bg-color;
    .hot-inner {
        max-width: 1380px;
        margin: 0 auto;
        .el-image {
            display: block;
            width: 100%;
        }
        ::v-deep.el-card {
            border: none;
            cursor: pointer;
            background-color: transparent;
            .card-footer {
                padding: 15px 0;
                transition: all 0.2s;
                .title {
                    font-size: 16px;
                    font-weight: 600;
                    white-space: nowrap;
                    overflow: hidden;
                    width: 100%;
                    text-overflow: ellipsis;
                }
            }
            &:hover {
                background-color: @white;
                .card-footer {
                    padding: 15px;
                }
            }
        }
    }
}
</style>
